import React, { useState, useEffect } from "react";
import { getTrainingFavorList } from "../../../api/sjq";
import "./training_favor.scss";
import {
  MergeCellsOutlined,
  AliwangwangOutlined,
  DribbbleOutlined,
} from "@ant-design/icons";
import { Pagination } from "antd";
export default function TrainingFavor(props) {
  //收藏项目数据
  const [favorList, setFavorList] = useState([]);
  const [total,setTotal] = useState(0);
  const [current,setCurrent] = useState(1);
  const [pageSize,setPageSize] = useState(5);
  useEffect(() => {
    const getFavor = async () => {
      let res = await getTrainingFavorList({pageNum:current,pageSize});
      setFavorList(res.data.rows);
      setTotal(res.data.total);
    };
    getFavor();
  }, [current,pageSize]);
  //跳转详情页面
  const goDeatil= (id)=>{
      props.history.push({
          pathname:"/home/prodetail",
          state:{id}
      })
  }
  //分页功能
  const changePage = () =>{
      
  }
  return (
    <div className="favor_list_render">
      {favorList.map((item, index) => (
        <div key={index} className="plat" onClick={()=>goDeatil(item.id)}>
          <div className="project_detail">
            <div className="project_img">
              <img src={item.pictureUrl} alt="" />
            </div>
            <div className="img_bottom">
              <div className="project_title">
                <div className="p_t_title">{item.name}</div>
                <div className="project_dire">{item.description}</div>
              </div>
              <div className="project_bottom">
                <div className="botome_detail">
                  <div className="flex_center">
                    <div className="shoucang flex_center">
                      <div className="aaaa">
                        <MergeCellsOutlined />
                      </div>
                      <div className="adope_count">{item.stuCount}</div>
                    </div>
                    <div className="shoucang flex_center">
                      <div className="aaaa">
                        <AliwangwangOutlined />
                      </div>
                      <div className="adope_count">{item.favorCount}</div>
                    </div>
                  </div>

                  <div>
                    <span className="start_train start_train3">专业群实训</span>
                  </div>
                </div>
              </div>
            </div>
            <div className="right_top_img">
              <DribbbleOutlined />
            </div>
          </div>
        </div>
      ))}
      <div className="favor_pagination">
      <Pagination size="small" total={total} current={current} pageSize={pageSize} onChange={(page, pageSize)=>{
        setCurrent(page);
        setPageSize(pageSize);
      }} showQuickJumper />
      </div>
    </div>
  );
}
